<template>
  <div>
    <h2>Home</h2>
    {{ form }}
    <form>
      <p>
        用户名 <input type="text" v-model="form.username">
      </p>
      <p>
        年龄 <input type="text" v-model="form.age">
      </p>
      <p>
        性别 <input type="radio" value="1" v-model="form.gender"> 男
        <input type="radio" value="2" v-model="form.gender"> 女
      </p>
      <p>
        爱好 <input type="checkbox" value="css" v-model="form.hobbys"> CSS
        <input type="checkbox" value="html" v-model="form.hobbys"> HTML
        <input type="checkbox" value="js" v-model="form.hobbys"> JS
      </p>
      <p>
        <button>保存</button>
        <button type="button" @click="infoStore.$reset()">重置</button>
      </p>
    </form>
  </div>
</template>
<script setup>
import { storeToRefs } from 'pinia';
import { useInfoStore } from './store';
const infoStore = useInfoStore();
const { form } = storeToRefs(infoStore);
</script>
